<template>
  <!-- <div id="app"> -->
  <!-- <div class="operation"></div> -->
  <!-- <div class="dom4Show" ref="dom4Show"></div> -->
  <!-- </div> -->
</template>
<script>
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
export default {
  name: "parent-app",
  data() {
    return {};
  },
  created() {},
  mounted() {
    this.load();
  },
  methods: {
    /** 初始加载 */
    load() {
      console.log("=======", THREE.OrbitControls);

      /**
       * 创建场景对象Scene
       */
      var scene = new THREE.Scene();
      /**
       * 创建网格模型
       */
      var geometry1 = new THREE.SphereGeometry(60, 40, 40); //创建一个球体几何对象
      var geometry = new THREE.BoxGeometry(100, 100, 100); //创建一个立方体几何对象Geometry
      //创建一个buffer类型几何体
      var geometry2 = new THREE.BufferGeometry()
      var vertices = new Float32Array([
        0, 0, 0, //顶点1坐标
        50, 0, 0, //顶点2坐标
        0, 100, 0, //顶点3坐标
        0, 0, 0, //顶点4坐标
        0, 0, 100, //顶点5坐标
        50, 0, 0, //顶点6坐标
      ])
      geometry2.attributes.position = new THREE.BufferAttribute(vertices,3)
      //类型数组创建顶点颜色color数据
      var colors = new Float32Array([
        1, 0, 0, //顶点1颜色
        0, 1, 0, //顶点2颜色
        0, 0, 1, //顶点3颜色

        1, 1, 0, //顶点4颜色
        0, 1, 1, //顶点5颜色
        1, 0, 1, //顶点6颜色
      ]);
      // 设置几何体attributes属性的颜色color属性
      geometry2.attributes.color = new THREE.BufferAttribute(colors, 3); //3个为一组,表示一个顶点的颜色数据RGB
      //材质对象
      var normals = new Float32Array([
        0, 0, 1, //顶点1法向量
        0, 0, 1, //顶点2法向量
        0, 0, 1, //顶点3法向量

        0, 1, 0, //顶点4法向量
        0, 1, 0, //顶点5法向量
        0, 1, 0, //顶点6法向量
      ]);
      // 设置几何体attributes属性的位置normal属性
      geometry2.attributes.normal = new THREE.BufferAttribute(normals, 3);
      var sphereMaterial = new THREE.MeshLambertMaterial({  //漫反射
        color: 0xff0000,
        opacity: 0.7,
        transparent: true,
        wireframe: false
      }); //材质对象
      var materia3 = new THREE.MeshBasicMaterial({
        color: 0x0000ff, //三角面颜色
        side: THREE.DoubleSide //两面可见
      }); //材质对象

      // 点渲染模式
      var material = new THREE.PointsMaterial({
        // color: 0xff0000,
        vertexColors: THREE.VertexColors,
        size: 10.0 //点对象像素尺寸
      }); //材质对象

      // var sphereMaterial1 = new THREE.MeshPhongMaterial({  //镜面反射
      //   color: 0x0000ff,
      //   specular: 0x4488ee,  //高光颜色
      //   shininess: 12,    //光照强度的系数
      // }); //材质对象
      // var mesh = new THREE.Mesh(geometry2, materia3); //网格模型对象Mesh
      var points = new THREE.Mesh(geometry2, materia3); //点模型对象
      // mesh.rotateY(100);
      // 辅助坐标系  参数250表示坐标系大小，可以根据场景大小去设置
      var axisHelper = new THREE.AxisHelper(250);
      scene.add(axisHelper);
      // scene.add(mesh); //网格模型添加到场景中
      scene.add(points); //网格模型添加到场景中

      // var mesh1 = new THREE.Mesh(geometry1, sphereMaterial1); //网格模型对象Mesh
      // mesh1.translateY(100);
      // scene.add(mesh1); //网格模型添加到场景中
      /**
       * 光源设置
       */
      //点光源
      var point = new THREE.PointLight(0xffffff);
      point.position.set(400, 200, 300); //点光源位置
      scene.add(point); //点光源添加到场景中
      var point2 = new THREE.PointLight(0xffffff);
      point2.position.set(-400, -200, -300); //点光源位置
      scene.add(point2); //点光源添加到场景中
      //环境光
      var ambient = new THREE.AmbientLight(0x444444);
      scene.add(ambient);
      // console.log(scene)
      // console.log(scene.children)
      /**
       * 相机设置
       */
      var width = window.innerWidth; //窗口宽度
      var height = window.innerHeight; //窗口高度
      var k = width / height; //窗口宽高比
      var s = 300; //三维场景显示范围控制系数，系数越大，显示的范围越大
      //创建相机对象
      var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000);
      camera.position.set(250, 300, 200); //设置相机位置
      camera.lookAt(scene.position); //设置相机方向(指向的场景对象)
      /**
       * 创建渲染器对象
       */
      var renderer = new THREE.WebGLRenderer();
      renderer.setSize(width, height); //设置渲染区域尺寸
      renderer.setClearColor(0xb9d3ff, 1); //设置背景颜色
      document.body.appendChild(renderer.domElement); //body元素中插入canvas对象
      /** ----------------场景旋转------------------ */
      // let T0 = Date.now();
      // function render() {
      //   let T1 = Date.now();
      //   let t = T1 - T0;
      //   T0 = T1;
      //执行渲染操作   指定场景、相机作为参数
      //   renderer.render(scene, camera);
      //   mesh.rotateY(0.001 * t); //每次绕y轴旋转0.01弧度
      //   requestAnimationFrame(render);
      // }
      function render() {
        renderer.render(scene, camera);
      }
      render();
      var controls = new OrbitControls(camera, renderer.domElement); //创建控件对象
      controls.addEventListener("change", render); //监听鼠标、键盘事件
    },
  },
};
</script>
<style lang="scss">
.operation {
  width: 400px;
  height: 40px;
  background: chocolate;
}
</style>
